import MFormItem from '../MFormItem';
import {Col, Input, Radio, Select, TreeSelect} from 'antd';
import React from 'react';

const { Option } = Select;

export const FormItem4Input = props => {
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...props}>
        <Input autoComplete="off" placeholder={'请输入'} style={{ width: '100%' }}></Input>
      </MFormItem>
    </Col>
  );
};

export const FormItem4InputPwd = props => {
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...props}>
        <Input.Password autoComplete="off" placeholder={'请输入'} style={{ width: '100%' }}></Input.Password>
      </MFormItem>
    </Col>
  );
};

export const FormItem4Select = props => {
  const { items, ...other } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...other}>
        <Select allowClear={true} style={{ width: '100%' }} dropdownMatchSelectWidth={false}>
          {
            items && items.map((item,index)=> {
              return (
                <Option key={item.dictValue} value={item.dictValue}>{
                  item.dictName
                }</Option>
              )
            })
          }
        </Select>
      </MFormItem>
    </Col>
  );
};

export const FormItem5Select = props => {
  const { items, ...other } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...other}>
        <Select allowClear={true} style={{ width: '100%' }} dropdownMatchSelectWidth={false}>
          {items && items.map(d => <Option key={d.value}>{d.name}</Option>)}
        </Select>
      </MFormItem>
    </Col>
  );
};

export const FormItem4TreeSelect = props => {
  const { items, ...other } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...other}>
        <TreeSelect
          showSearch
          style={{ width: '100%' }}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={items}
          placeholder={"请选择机构"}
          treeNodeFilterProp="title"
        />
      </MFormItem>
    </Col>
  );
};

export const FormItem4Radio = props => {
  const { items, ...other } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...other}>
        <Radio.Group>
          {items
            ? items.map((item, index) => {
              return (
                <Radio key={index} value={item.dictValue}>
                  {item.dictName}
                </Radio>
              );
            })
            : null}
        </Radio.Group>
      </MFormItem>
    </Col>
  );
};
